<template>
  <div class="detail-container">
    <div class="video-info">
      <div style="width: 95%;">
        <div>
          <video-player v-model:video-id="videoId"  @uploaderInfo="uploaderInformation"/>
        </div>
        
        <!-- 评论区 -->
        <div style="margin-top: 20px;">
          <comment v-model:video-id="videoId"/>
        </div>
      </div>

      

    </div>

    <div class="reComment">

      <div class="uploaderInfo">
        <div style="display: flex;width: 100%; align-items: center;">
          <div class="uploader-avatar">
            <img :src="uploaderInfo.avatar" alt="">
          </div>
          <div style="display: flex;width: 70%;margin: 3%;flex-direction: column;">
            <div>
              <span class="uploader-name">{{ uploaderInfo.userName }}</span>
            </div>
            <div style="margin: 2%;" :title="uploaderInfo.selfIntroduction">
            {{ uploaderInfo.selfIntroduction.length > 10 ? uploaderInfo.selfIntroduction.substring(0,10) + "..."  : uploaderInfo.selfIntroduction }}
            </div>

            <div>
              <a-button style="width: 70%;">关注TA</a-button>
            </div>
          </div>
        </div>
      </div>

      <h3>相关推荐</h3>
      <div v-if="videoList.length > 0" >
        <a-card class="video-item" :bordered="false" @click="enterDetails(item.videoId,item.id)" v-for="(item,index) in videoList" :key="index">
          <a-skeleton :loading="loading" active avatar>
            <div>
              <div class="image-div">
                <img :src="item.cover" crossorigin="anonymous" />
                <PlayCircleOutlined class="play" />
              </div>
              <span>{{ item.title }}</span>
              <div class="uploader">
                <span style="width: fit-content;">{{ item.uploader }}</span>
                <span>·</span>
                <span>{{ item.uploadTime }}</span>
              </div>
            </div>
          </a-skeleton>

        </a-card>
      </div>

      <div v-else>
        暂无
      </div>

    </div>
  </div>
</template>
<script setup>
import { ref, reactive ,onMounted } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import comment from '@/components/comment/Comment.vue'
import { useRoute ,useRouter} from 'vue-router'
import {PlayCircleOutlined } from '@ant-design/icons-vue';
import { videoRecommend } from '@/api/video.js';
import { formatDate } from '@/utils/dateFormat.js';
import { useStore } from 'vuex' 
const route = useRoute();
const router = useRouter();
const store = useStore();

const videoId = ref(route.params.videoId);
const id = ref(route.query.id);
const loading = ref(true)

let videoList = reactive([])
let uploaderInfo = reactive({
  userId: '',
  userName: '',
  selfIntroduction: '',
  avatar:'',
})
onMounted(() => {
  initReactiveVideoList();
})

/**
 * 相关视频推荐
 */
const initReactiveVideoList = () => {
  const msg = {
    userId: store.getters['user/id'],
    videoId: id.value,
  }
  videoList.length = 0;
  videoRecommend(msg).then(res => {

    videoList.push(...res.data.map(item => { return {    
      cover: process.env.VUE_APP_VIDEO_PROXY_TARGET + "/image/" + item.cover,
      title: item.title,
      uploader: item.user_name,
      uploadTime: formatDate(item.upload_time),
      videoId: item.video_id,
      id: item.id,}}));
      
  })
  .catch(err => {
  })
  .finally(() => {
    //骨架屏展示关闭
    loading.value = false;
  });
}

/**
 * 观看其他视频
 * @param {String} val 
 * @param {String} valId 
 */
const enterDetails = (val,valId) => {

  document.documentElement.scrollTop = 0;
  window.pageYOffset = 0; // 兼容ios
  document.body.scrollTop = 0; // 兼容低版本ie

  router.push({path: `/details/${val}`,query:{id : valId}});
  
  //赋值新视频相关信息
  videoId.value = val;
  id.value = valId;
  initReactiveVideoList();

}

const uploaderInformation = (obj) => {
  for(let x in obj){

    if(obj[x]){
      uploaderInfo[x] = obj[x];
    }
  }
}
</script>
<style scoped>
.detail-container {
  margin-top: 90px;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.detail-container .video-info {
  width: 60%;

}

.detail-container .reComment {
  width: 25%;
}


.reComment .video-item{
  width: 60%;
  cursor: pointer;
  overflow: hidden;
  margin-top: 10px;
}
.image-div{
  border-radius: 7px; 
  overflow: hidden;
  max-height: 107px;

}
.reComment .video-item:hover{
  background: gainsboro;
}

.reComment .video-item:hover .play{
  opacity: 0.7;
}

.reComment .video-item .play{
  font-size: 40px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  transition: 0.5s opacity;
}

.reComment .video-item .uploader{
  width: 100%;
  display: flex;
  justify-content: space-between;

}

img{
  width: 100%; height: 100%;
}

.uploaderInfo{
  margin: 1%;
}

.uploader-name{
  color: #fb7474;
  cursor: pointer;
}

.uploader-name:hover{
  border-bottom: 1px solid;
}


.uploader-avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  color: skyblue;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
</style>